<template>
    <div class="dashboard">
        <div class="info">
            <el-row>
                <el-col :span="6">
                    <el-statistic title="总井组数" :value="StatisticsInfo.total_count" />
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="StatisticsInfo.valid_count">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                测试井组数
                            </div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic title="训练井组数" :value="StatisticsInfo.water_count" />
                </el-col>
                <el-col :span="6">
                    <el-statistic title="预警井组数" :value="tableData.length">
                    </el-statistic>
                </el-col>
            </el-row>


        </div>
        <div class="data_table">
            <el-table :data="tableData" style="width: 100% ;height: 700px;" v-loading="loading">
                <el-table-column align="center" type="index" label="序号" width="100" :index="indexMethod" />
                <el-table-column align="center" prop="井号" label="井号" width="180" />
                <el-table-column align="center" prop="层位" label="层位" width="180" />
                <el-table-column align="center" prop="预警时间" label="最近预警时间" width="180" />
                <el-table-column align="center" prop="days_difference" label="距今天数" width="180" />
                <el-table-column align="center" prop="tag" label="预警类型" width="180">
                    <template #default="scope">
                        <el-tag :type="scope.row.tag == '1' ? 'warning' : 'danger'" disable-transitions>{{
                            scope.row.tag == 1 ? "积液" : "水淹" }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" fixed="right" label="操作">
                    <template #default="scope">
                        <el-popconfirm title="确定该警告为误报吗?">
                            <template #reference>
                                <el-button link type="primary" size="small">
                                    误报处理
                                </el-button>
                            </template>
                        </el-popconfirm>
                        <el-button link type="primary" size="small"
                            @click="jumpToTargetView(scope.row.井号, scope.row.层位)">详情</el-button>
                    </template>
                </el-table-column>


            </el-table>
            <!-- <el-pagination background layout="prev, pager, next" :total="10" class="pagination"
                :hide-on-single-page="false" /> -->
        </div>

    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getStatisticsInfo, getWarningInfo } from '@/config/api'
import router from '@/router';

const StatisticsInfo = ref({
    total_count: 0,
    water_count: 0,
    valid_count: 0,
    warning_count: 0
})
const loading = ref(true)
const getInfo = async () => {
    const { data } = await getStatisticsInfo()
    console.log(`output->data`, data)
    StatisticsInfo.value = data.data[0]
}
const getWarning = async () => {
    const { data } = await getWarningInfo()
    tableData.push(...data.data)
    loading.value = false
    sessionStorage.setItem('warning_data', JSON.stringify(tableData))
}
const getWarningFromLocal = () => {
    const data = sessionStorage.getItem('warning_data')
    const mydata = ref();
    if (data !== null && data.trim() !== '') {
        try {
            mydata.value = JSON.parse(data);
            tableData.push(...mydata.value)
            loading.value = false
        } catch (error) {
            console.error('Failed to parse JSON:', error);
        }
    } else {
        // 可以设定一个默认值或者直接保持 mydata 为 undefined
        mydata.value = []; // 示例中设置一个空对象作为默认值
    }



}

onMounted(() => {
    getInfo()
    getWarningFromLocal()
    if (tableData.length == 0) {
        getWarning()
    }


})

const indexMethod = (index: number) => {
    return index + 1
}
interface WarningInfo {
    井号: string
    层位: string
    预警时间: string
    tag: string
    days_difference: number
}
const tableData: WarningInfo[] = reactive<WarningInfo[]>([])
const jumpToTargetView = (well_id: string, layer_id: string) => {
    console.log(`output->well_id`, well_id)
    router.push({
        path: '/details',
        query: {
            well_id: well_id,
            layer_id: layer_id
        }
    })
}

</script>
<style lang="scss" scoped>
.dashboard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-items: center;
}

.el-col {
    text-align: center;
}

.data_table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    margin: 20px 10px;
}

.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
    --el-statistic-title-font-size: 18px;

}
</style>